import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import '../../style/kuangjia.css';
import '../../style/main.css';

const RowplayLists = ({ playlists }) => {

  const itemsPerPage = 6; // 每页显示的项目数
  const [currentPage, setCurrentPage] = useState(0);
  const totalPages = Math.ceil(playlists.length / itemsPerPage);

  const handleNextPage = () => {
    if (currentPage < totalPages - 1) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePreviousPage = () => {
    if (currentPage > 0) {
      setCurrentPage(currentPage - 1);
    }
  };

  const currentItems = playlists.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage);

  return (
    <div className="Playlist_recycle">
      <div className="hideicon4" onClick={handlePreviousPage} style={{ cursor: 'pointer' }}>
        <i className="ri-arrow-left-wide-line"></i>
      </div>
      <div className="hideicon4" onClick={handleNextPage} style={{ cursor: 'pointer' }}>
        <i className="ri-arrow-right-wide-line"></i>
      </div>
      <ul>
        {currentItems.map((playlist) => (
          <Link to={`${playlist.id}`} key={playlist.id}>
            <li >
              <div className="card">
                <img
                  src={playlist.coverImgUrl || 'src/img/default.jpg'}
                  alt={playlist.name}
                />
                <p>{playlist.name}</p>
              </div>
            </li>
          </Link>

        ))}
      </ul>
    </div>
  );
};

export default RowplayLists;
